<template>
  <div class="notice_con">
    <template v-if="workList.length">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getWorkList">
        <div class="notice_li" v-for="item in workList" :key="item.id" @click="goDetail(item)">
          <div class="notice_li_tit">
            {{ item.bulletinTitle }}
          </div>
          <div class="notice_li_label">
            <span class="label_type" v-if="type === 'SYSTEM_NOTICE'">系统公告</span>
            <span class="label_type" v-if="type === 'user'">用户通知</span>
            <span class="label_line">|</span>
            <span class="label_time">{{ item.releaseTime }}</span>
          </div>
        </div>
      </van-list>
    </template>
    <van-empty description="暂无数据" v-else></van-empty>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import { listWorks, workSaveRead } from '@api/api.js'
export default {
  name: 'systemNotifcationList',
  components: { MyNavBar },
  props: {},
  data() {
    return {
      title: '系统公告',
      workList: [],
      currentPage: 1,
      pageSize: 20,
      workTotalPages: 0,
      loading: false,
      finished: false,
      type: 'documentart',
      isClear: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.type = this.$route.query.id
    if (this.type === 'SYSTEM_NOTICE') {
      this.title = '系统公告'
    } else if (this.type === 'user') {
      this.title = '用户通知'
    }
  },
  mounted() {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    goHome() {
      this.$router.push('home')
    },
    //获取工作通知
    getWorkList() {
      listWorks({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        status: '1',
        type: '0',
        userType: '2',
      }).then(res => {
        const data = res.data
        this.workList.push(...data.content)
        this.workTotalPages = data.totalSize
        this.currentPage++
        this.loading = false
        if (this.workList.length === this.workTotalPages) {
          this.finished = true
        }
      })
    },
    goDetail(item) {
      workSaveRead({
        bulletionId: item.bulletionId,
        isTop: item.isTop,
      }).then(res => {
        this.$router.push({ path: `/documentDetail`, query: { bulletionId: item.bulletionId } })
      })
    },
    clear() {
      console.log('clear')
    },
  },
}
</script>

<style lang="scss" scoped>
.notice_con {
  padding: 8px 16px;
  .notice_li {
    display: flex;
    flex-direction: column;
    padding: 8px 5px;
    border: 1px solid #efefef;
    border-radius: 3px;
    margin-bottom: 8px;
    &:not(:last-of-type) {
      border-bottom: 2px solid #efefef;
    }
    .notice_li_tit {
      font-size: 13px;
      color: #333333;
      margin-bottom: 8px;
    }
    .notice_li_label {
      font-size: 12px;
      .label_type {
        color: #a57d60;
      }
      .label_line {
        color: #999999;
        margin: 0 8px;
      }
      .label_time {
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>
